<template>
   <text class="manage" @tap="isManage = !isManage">{{ isManage ? '管理' : '完成' }}</text>
   <view class="address-view" v-for="(item, index) in addressList" :key="item._id">
      <view class="address-flex" @tap="selectAddress(item)">
         <view class="select-address">
            <text>{{ item.address }}</text>
            <text class="address-detail-address">{{ item.detail }}</text>
            <view class="select-user">
               <text>{{ item.name }}</text>
               <text>{{ item.phone }}</text>
            </view>
         </view>
         <text class="default-address" v-if="item.isDefault">默认</text>
      </view>
      <view class="address-flex setting" v-if="!isManage">
         <text @tap="setDefaultAddress(item)">设为默认</text>
         <text @tap="delAddress(index, item._id!)">删除</text>
      </view>
   </view>
   <!-- 无收货地址 -->
   <Tips v-if="nodata">你还没有收货地址</Tips>
   <button class="add-button flex-center" @tap="addAddress">
      <image class="add_image" src="/static/plus.png" /> 添加收货地址
   </button>
</template>
<script setup lang="ts">
import request from '@/api/request';
import Tips from "@/component/tipes.vue";
import { useStore } from '@/store';
import type { AddressInfo } from '@/types';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { watch } from 'vue';
import { ref } from 'vue';
const addressList = ref<AddressInfo[]>();
const isManage = ref(true);
const nodata = ref(false);
const store = useStore();
onShow(() => {
   request<AddressInfo[]>("/getAllAddress").then(res => {
      addressList.value = res.data;
   });
});
const setDefaultAddress = async (item: AddressInfo) => {
   await request("/setDefaultAddress", { _id: item._id }, "POST");
   addressList.value?.forEach(addr => addr.isDefault = false);
   item.isDefault = true;
   uni.setStorageSync("defaultAddress", item);
   isManage.value = true;
};
const delAddress = async (index: number, _id: string) => {
   await request("/delAddress/" + _id, {}, "DELETE");
   if (addressList.value![index].isDefault) uni.setStorageSync("defaultAddress", undefined);
   addressList.value?.splice(index, 1);
   isManage.value = true;
};
const addAddress = () => {
   uni.navigateTo({ url: "/pages/createAddress/index" });
};
const selectAddress= (item:AddressInfo)=>{
   store.selectedAddress = item;
   uni.navigateBack();   
}
watch(() => addressList.value?.length, (newLength) => {
   nodata.value = !Boolean(newLength);
})

</script>
<style lang="scss">
page {
   background-color: #f5f5f5;
}

.add_image {
   width: 40rpx;
   height: 40rpx;
   margin-right: 20rpx;
}

.manage {
   text-align: right;
   padding: 20rpx 20rpx 0 0;
}

.address-view {
   background-color: #fefefe;
   padding: 10rpx 30rpx;
   border-radius: 10rpx;
   margin: 20rpx;

}

.address-flex {
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.address-view image {
   width: 40rpx;
}

.default-address {
   color: #777777;
}

.setting {
   padding: 20rpx 0;
   border-top: 1rpx solid #f2f2f2;
   color: #777777;
   font-size: 28rpx;
}
</style>